<template>
	<div class="portrait">
		<van-form readonly>
			<van-field :value="info.name" name="姓名" label="姓名" />
			<van-field :value="info.gender === 1 ? '男' : info.gender === 2 ? '女' : ''" name="性别" label="性别" />
			<van-field :value="info.age" name="年龄" label="年龄" />
			<van-field :value="info.birthday" name="生日" label="生日" />
			<van-field :value="info.area" name="区域" label="区域" />
			<van-field :value="info.address" name="地址" label="地址" />
			<van-field :value="industry" name="行业" label="行业" />
			<van-field :value="info.company" name="公司" label="公司" />
			<van-field :value="info.income" name="年收入" label="年收入" />
			<van-field :value="info.hobby" name="爱好" label="爱好" />
			<van-field :value="info.wechat" name="微信号" label="微信号" />
			<van-field :value="detail.follow_remark_mobiles" name="手机号" label="手机号" />
			<van-field :value="info.qq" name="QQ号" label="QQ号" />
			<van-field :value="info.email" name="邮箱" label="邮箱" />
			<van-field :value="intent" name="客户意向" label="客户意向" />
			<van-field :value="detail.follow_remark" name="备注" label="备注" />
			<van-field name="uploader" label="照片">
				<template #input>
					<img v-if="info.photo" :src="info.photo" width="50px" height="50px" style="object-fit: cover;" alt="" />
				</template>
			</van-field>
		</van-form>
		<div class="footer">
			<van-button block color="#6881ec" @click="handleCall">打电话</van-button>
			<van-button block color="#6881ec" @click="handleEdit">编辑画像</van-button>
		</div>
	</div>
</template>

<script>
import { NavBar, Field, Form, RadioGroup, Radio, Button, Area, Calendar, Popup, Picker, Uploader, Toast, DatetimePicker } from 'vant';
import { getPortrait, getIndustryList } from '../../../api/detail.js';
export default {
	components: {
		[NavBar.name]: NavBar,
		[Field.name]: Field,
		[Form.name]: Form,
		[RadioGroup.name]: RadioGroup,
		[Radio.name]: Radio,
		[Button.name]: Button,
		[Area.name]: Area,
		[Calendar.name]: Calendar,
		[Popup.name]: Popup,
		[Picker.name]: Picker,
		[Uploader.name]: Uploader,
		[Toast.name]: Toast,
		[DatetimePicker.name]: DatetimePicker
	},
	props: {
		detail: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			industryList: [],
			info: {},
			intention: [
				{
					id: 1,
					name: '暂无意向'
				},
				{
					id: 2,
					name: '观望中'
				},
				{
					id: 3,
					name: '有意向'
				}
			]
		};
	},
	computed: {
		industry() {
			if (this.info.industry) {
				return this.industryList.filter(res => res.id == this.info.industry).length > 0 ? this.industryList.filter(res => res.id == this.info.industry)[0].name : '';
			} else {
				return '';
			}
		},
		intent() {
			if (this.info.intention) {
				return this.intention.filter(res => res.id == this.info.intention)[0].name;
			} else {
				return '';
			}
		}
	},
	created() {
		Toast.loading({
			message: '加载中...',
			forbidClick: true,
			duration: 0
		});
		Promise.all([
			new Promise(resolve => {
				this.getInfo(resolve);
			}),
			new Promise(resolve => {
				this.getIndustry(resolve);
			})
		]).then(() => {
			Toast.clear();
		});
	},
	methods: {
		// 获取行业列表
		async getIndustry(resolve) {
			const { code, data, msg } = await getIndustryList({});
			resolve ? resolve() : '';
			if (code === 200) {
				this.industryList = data.industry;
				sessionStorage.setItem('industry', JSON.stringify(data.industry));
			} else {
				Toast.fail(msg);
			}
		},
		// 获取用户画像
		async getInfo(resolve) {
			const { code, data, msg } = await getPortrait({
				external_user_id: sessionStorage.getItem('external_user_id')
			});
			resolve ? resolve() : resolve;
			if (code === 200) {
				if (data instanceof Array) {
					this.info = {};
					sessionStorage.setItem('portrait', JSON.stringify({}));
				} else {
					this.info = data;
					sessionStorage.setItem('portrait', JSON.stringify(data));
				}
			} else {
				Toast.fail(msg);
			}
		},
		// 打电话
		handleCall() {
			if (this.detail.follow_remark_mobiles) {
				var a = document.createElement('a');
				a.href = `tel:${this.detail.follow_remark_mobiles}`;
				a.click();
			} else {
				Toast.fail('请添加电话号码后再尝试');
			}
		},
		// 编辑画像
		handleEdit() {
			this.$router.push({
				path: '/detail_portrait',
				query: {
					mobile: this.detail.follow_remark_mobiles,
					note: this.detail.follow_remark
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.portrait {
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100vh - 260px);
	padding: 10px 16px;
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.van-button {
			width: 49%;
		}
	}
}
</style>
